import React, { PureComponent } from 'react'
import { history } from '@umijs/max'
import { Col, Row } from 'antd'
import { getHashParameterByName } from '@/utils/helper'
import { BreadcrumbBar } from '@/components'
import styles from './index.less'
import { detail } from './api'

const menus = [{ name: '任务运维' }, { name: '详情' }]

const calcStatus = (status) => {
  switch (status) {
    case 1:
      return <span className={styles.cont} title="运行中">运行中</span>
    case 2:
      return <span className={`${styles.cont} ${styles.success}`} title="成功">成功</span>
    case 3:
      return <span className={`${styles.cont} ${styles.error}`} title="失败">失败</span>
    case 4:
      return <span className={styles.cont} title="停止">停止</span>
    case 5:
      return <span className={styles.cont} title="暂停">暂停</span>
    default:
      return '-'
  }
}

class OperationView extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      infoData: {},
    }
  }

  componentDidMount() {
    this.detail()
  }

  detail = () => {
    const jobId = getHashParameterByName('jobId')
    detail({ id: jobId }).then((res) => {
      this.setState({
        infoData: res,
      })
    })
  }

  render() {
    const { infoData } = this.state
    const calcExecuteType = ['', 'FlinkSQL', '', 'Flink'][infoData?.taskType] || '-'
    const calcCycle = ['每天', '周一至周五'][infoData?.scheduleType] || '-'
    return (
      <div className={styles.operation_detail}>
        <BreadcrumbBar menu={menus} />
        <div className={styles.back_bar}>
          <i
            className="iconfont icon-zuo"
            onClick={() => { history.push('/data-development/realTime/task-operation') }}
          />
          <span onClick={() => { history.push('/data-development/realTime/task-operation') }}>详情</span>
        </div>
        <div className={styles.container}>
          <div className={styles.title}>基本信息</div>
          <Row className={styles.row}>
            <Col span={8} className={styles.col}>任务名称：<span className={styles.cont} title={infoData?.taskName}>{infoData?.taskName}</span></Col>
            <Col span={8} className={styles.col}>任务类型：<span className={styles.cont} title={calcExecuteType}>{calcExecuteType}</span></Col>
            <Col span={8} className={styles.col}>调度周期：<span className={styles.cont} title={calcCycle}>{calcCycle}</span></Col>
          </Row>
          <Row className={styles.row}>
            <Col span={8} className={styles.col}>创建时间：<span className={styles.cont} title={infoData?.createTime || '-'}>{infoData?.createTime || '-'}</span></Col>
            <Col span={8} className={styles.col}>责任人：<span className={styles.cont} title={infoData?.userName || '-'}>{infoData?.userName || '-'}</span></Col>
          </Row>
          <div className={styles.title}>运行信息</div>
          <Row className={styles.row}>
            <Col span={8} className={styles.col}>任务状态：{calcStatus(infoData?.status)}</Col>
            <Col span={8} className={styles.col}>计划开始时间：<span className={styles.cont} title={infoData?.planTime || '-'}>{infoData?.planTime || '-'}</span></Col>
            <Col span={8} className={styles.col}>开始时间：<span className={styles.cont} title={infoData?.startTime || '-'}>{infoData?.startTime || '-'}</span></Col>
          </Row>
          <Row className={styles.row}>
            <Col span={8} className={styles.col}>结束时间：<span className={styles.cont} title={infoData?.endTime || '-'}>{infoData?.endTime || '-'}</span></Col>
            <Col span={8} className={styles.col}>运行时长：<span className={styles.cont} title={`${infoData?.expendTime ? `${infoData?.expendTime}(s)` : '-'}`}>{`${infoData?.expendTime ? `${infoData?.expendTime}(s)` : '-'}`}</span></Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default OperationView
